<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>dota</title>
    <link rel="stylesheet" href="animate.min.css">
    <link rel="stylesheet" href="base.css">
    <style>
        * {
            word-break: break-all;
        }

        body, div, p {
            margin: 0 auto;
            padding: 0px;
            font-size: 12px;
            width: 100%;
        }

        ul {
            list-style: none;
        }

        img, a img {
            border: none;
        }

        a {
            text-decoration: none;
        }

        a {
            color: #000;
        }

        a:hover {
            text-decoration: none;
        }

        body {
            background-color: rgba(33, 33, 33, 1.00);
            overflow: hidden;
            top: -20px;
        }

        .dota2_card {
            float: left;
            width: 20rem;
            height: 21rem;
            margin-left: 2.6rem;
            padding-top: 1rem;
            color: #6C6E85;
            transition: all 1s ease 0s;
        }

        .dota2_card:hover {
            color: #000;
            box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, .5);
        }

        .dota2_card img {
            width: 9rem;
            height: 9rem;
            display: block;
            margin: 0 auto;
            border: 4px solid #343851;
            border-radius: 0rem;
        }

        .dota2_card dd {
            font-size: 1.25rem;
            width: 12.5rem;
            line-height: 3rem;
            text-align: center;
            border-bottom: 1px solid #6C6E85;
        }

        .dota2_card p {
            font-size: 1.5625rem;
            text-align: center;
            width: 13rem;
            line-height: 2.2rem;
            margin-top: 0.625rem;
        }

        .dota2_card:hover {
            color: #fff;
        }

        .dota2_card a {
            display: block;
            background: url(jiantou.png);
            width: 1.9375rem;
            height: 1.9375rem;
            border: 0px;
            margin: 0.5rem auto;
        }

        .dota2_card a:hover {
            background: url(jiantou2.png);
        }

        .dota2_div {
            width: 100%;
            float: left;
        }

        #dota2_message {
            margin-top: 12rem;
            height: 12.5rem;
        }

        #dota2_title, #dota2_end, #dota2_ps {
            width: 26.25rem;
            height: 5rem;
            background: rgba(187, 236, 234, 0.2);
            /* margin-top: 2rem; */
            padding: 0.9375rem;
            color: #fff;
            font-size: 1.5625rem;
            line-height: 2.8125rem;
            border-radius: 5px;
        }

        #dota2_end, #dota2_ps {
            margin-top: 8.4375rem;
            font-size: 1.625rem;
            width: 51.25rem;
            height: 5.625rem;
        }

        #dota2_end {
            font-size: 1.875rem;
            background-color: rgba(33, 33, 33, 1.00);
        }

        #dota2 {
            position: relative;
            left: -2100px
        }

        .dota2_rate3,
        .dota2_rate4,
        .dota2_rate5 {
            border: 1px solid #05ff8f;
        }

        .dota2_rate2 {
            border: 3px solid #bca6d5;
        }

        .dota2_rate1 {
            border: 5px solid #dcdc00;
        }

        #alert_msg {
            height: 3.75rem;
            text-align: center;
            position: fixed;
            top: 30%;
            margin-top: -16rem;
            line-height: 3rem;
            width: 100%;
        }

        #alert_msg span {
            color: #fff;
            background: rgba(0, 0, 0, 0.6);
            height: 3rem;
            display: inline-block;
            padding: 0 3rem;
            border-radius: 5px;
        }

        /*图片墙*/
        .wrapper-images {
            display: flex;
            flex-direction: column;
            height: 150vh;
            width: 175vw;
            justify-content: center;
            left: 60%;
            position: absolute;
            top: 55%;
            opacity: 0.8;
            transform: translate3d(-50%, -50%, 0) perspective(800px) rotatey(10deg) rotateX(-10deg);
            overflow: hidden;
        }

        .images-line {
            -webkit-animation: runner 15s linear infinite;
            animation: runner 15s linear infinite;
            display: flex;
            transform: translateX(23%);
        }

        .images-line:nth-child(even) {
            -webkit-animation-duration: calc(15s * 1.5);
            animation-duration: calc(15s * 1.5);
        }

        .images-line .line {
            background-position: 50% 50%;
            background-size: cover;
            flex: none;
            height: 14vh;
            margin: clamp(5px, 5px, 5px);
            width: 30vh;
            position: relative;
            transition: ease-in-out all 0.3s;
            border-radius: 1rem;
        }

        .images-line .line .img {
            position: absolute;
            z-index: 2;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-position: 50% 50%;
            background-size: cover;
            transition: ease-in-out all 0.3s;
            overflow: hidden;
            border-radius: 1rem;
        }

        /*.img_bdzm3{*/
        /*    color: #fff;*/
        /*    font-size: 1.25rem;*/
        /*    line-height: 1;*/
        /*    border-style: none;*/
        /*    outline: none;*/
        /*    height: calc(1em + 1.6em + 0.5em);*/
        /*    width: 100%;*/
        /*    padding: 0.8em 1em;*/
        /*    border: 0.35em solid transparent;*/
        /*    background-image: linear-gradient(#000, #000), linear-gradient(120deg, #f09 0%, #0ff 50%, #9f0 100%);*/
        /*    background-origin: border-box;*/
        /*    background-clip: padding-box, border-box;*/
        /*    border-radius: 1.8em;*/
        /*    background-size: 200% 100%;*/
        /*    transition: background-position 0.8s ease-out;*/
        /*}*/
        .images-line .line:hover .img {
            cursor: pointer;
            transform: scale(1.1) translatez(0px);
            border: 3px solid var(--theme-color);;
        }

        .images-line .img_bdzm3:hover .img {
            border: 5px solid gold;
        }

        .images-line .line:hover:after {
            filter: blur(35px) opacity(0.8);
        }

        .images-line .line:after {
            content: "";
            background: inherit;
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            top: 3vh;
            position: absolute;
            background-size: cover;
            z-index: -1;
            transition: ease-in-out all 0.3s;
            filter: blur(25px) opacity(0.8);
        }

        @-webkit-keyframes runner {
            to {
                transform: translateX(-10.4%);
            }
        }

        @keyframes runner {
            to {
                transform: translateX(-10.4%);
            }
        }
        .tt{
            border: 3px solid #29cc2d;
        }
        .yy{
            border: 3px solid #cc3729;
        }
        #background_video {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            object-fit: cover;
            height: 100%; width: 100%;
            display: none;
        }
        #video_cover {
            position: absolute;
            width: 100%; height: 100%;
            background: url('4b46024f7c13111e93b4bf5c823acc7 g'd'c'g'r'f'v.png') no-repeat;
            background-size: cover;
            background-position: center;
            display: none;
        }
    </style>
</head>
<body>
<video id="background_video" muted></video>
<div id="video_cover"></div>
<button id="play">开始</button>
<button id="pause">暂停</button>
<button id="check">跟踪动画</button>
<button id="img_hidden">小可爱</button>
<button id="music">音乐</button>
<div class="wrapper-images" style="display: none"></div>
<div id="dota2">
    <div id="dota2_title" class="dota2_div"></div>
    <div id="dota2_message" class="dota2_div"></div>
    <div id="dota2_ps" style="display: none;"></div>
    <div id="dota2_end" style="display: none;"></div>
</div>
<table id="dota2_table"></table>
<audio controls autoplay loop id="myMusic" hidden>
    <source src="pa.mp3" type="audio/mpeg">
</audio>
<div id="console_message"></div>
<div class="dota2_war" style="display: none">
    <img id="hero_tt_1" class="tt" src="https://hoppinzq.com/dota2/gif/npc_dota_hero_beastmaster.gif" style="border-radius: 50%;width: 50px;height: 50px;position: absolute;top: 540px;left: 670px">
    <img id="hero_tt_2" class="tt" src="https://hoppinzq.com/dota2/gif/npc_dota_hero_keeper_of_the_light.gif" style="border-radius: 50%;width: 50px;height: 50px;position: absolute;top: 540px;left: 730px">
    <img id="hero_tt_3" class="tt" src="https://hoppinzq.com/dota2/gif/npc_dota_hero_void_spirit.gif" style="border-radius: 50%;width: 50px;height: 50px;position: absolute;top: 570px;left: 790px">
    <img id="hero_tt_4" class="tt" src="https://hoppinzq.com/dota2/gif/npc_dota_hero_enchantress.gif" style="border-radius: 50%;width: 50px;height: 50px;position: absolute;top: 620px;left: 830px">
    <img id="hero_tt_5" class="tt" src="https://hoppinzq.com/dota2/gif/npc_dota_hero_morphling.gif" style="border-radius: 50%;width: 50px;height: 50px;position: absolute;top: 680px;left: 830px">

    <img id="hero_yy_1" class="yy" src="https://hoppinzq.com/dota2/gif/npc_dota_hero_juggernaut.gif" style="border-radius: 50%;width: 50px;height: 50px;position: absolute;top: 130px;left: 1110px">
    <img id="hero_yy_2" class="yy" src="https://hoppinzq.com/dota2/gif/npc_dota_hero_ogre_magi.gif" style="border-radius: 50%;width: 50px;height: 50px;position: absolute;top: 190px;left: 1110px">
    <img id="hero_yy_3" class="yy" src="https://hoppinzq.com/dota2/gif/npc_dota_hero_puck.gif" style="border-radius: 50%;width: 50px;height: 50px;position: absolute;top: 210px;left: 1170px">
    <img id="hero_yy_4" class="yy" src="https://hoppinzq.com/dota2/gif/npc_dota_hero_phoenix.gif" style="border-radius: 50%;width: 50px;height: 50px;position: absolute;top: 230px;left: 1230px">
    <img id="hero_yy_5" class="yy" src="https://hoppinzq.com/dota2/gif/npc_dota_hero_mars.gif" style="border-radius: 50%;width: 50px;height: 50px;position: absolute;top: 230px;left: 1290px">
</div>
</body>

<script src="jquery-3.3.1.js"></script>
<script src="anime.min.js"></script>
<script src="bg/bideo.js"></script>
<script>
    var arr;
    var obj;
    var moveX = 2100;
    var base_delay = 1000;
    var base_delay_endTime = 10000;
    var hero_num = 5;
    var split_dota2 = "npc_dota_hero_";
    var time_each_card = 25000;
    var time_each_card_delay = 1;
    var delay_endTime = 4000;
    var delay_gold_endTime = 17000;
    var ps_leaveTime = 2000;
    var ps_main_leaveTime = 4000;
    var timeout = function (n) {
        return new Promise(function (resolve) {
            setTimeout(resolve, n);
        });
    };
    var result_heroes = [];
    var result_heroes_str = [];
    var animation = [];
    var background_video = new Bideo();
    $(function () {
        $("#music").click(function () {
            let audios = document.getElementById('myMusic');
            if (audios.paused) {
                audios.play();
            } else {
                audios.pause();
            }
        })
        $("body").click(function () {
            let audios = document.getElementById('myMusic');
            if (audios.paused) {
                audios.play();
            } else {
                audios.pause();
            }
        })
        $("#play").click(function () {
            $.each(animation,function (index,element) {
                element.play();
            })
        });
        $("#pause").click(function () {
            $.each(animation,function (index,element) {
                element.pause();
            })
        });
        $("#check").click(function () {
            $("#console_message").html("");
            $.each(animation,function (index,element) {
                let id = element.animatables[0].target.id
                let dom = document.getElementById(id);
                if ($(dom).length) {
                    $("#console_message").append($("#console_message").html()+`"${anime.get(dom, 'width', 'px')}"`);//todo
                }
            })
        });

        $.ajaxSettings.async = false;
        $.getJSON('heroes.json', function (data) {
            let heroes = JSON.parse(JSON.stringify(data));
            let heroes_cn;
            $.getJSON('heroes_simple_cn.json', function (data_cn) {
                heroes_cn_result = JSON.parse(JSON.stringify(data_cn));
                heroes_cn = heroes_cn_result.result.heroes;
            })
            for (let key in heroes) {
                let hero = data[key]
                if (hero.primary_attr === "agi") {
                    hero.base_attack = (hero.base_attack_min + hero.base_attack_max) / 2 + hero.base_agi;
                }
                if (hero.primary_attr === "str") {
                    hero.base_attack = (hero.base_attack_min + hero.base_attack_max) / 2 + hero.base_str;
                }
                if (hero.primary_attr === "int") {
                    hero.base_attack = (hero.base_attack_min + hero.base_attack_max) / 2 + hero.base_int;
                }
                if (hero.primary_attr === "all") {
                    hero.base_attack = (hero.base_attack_min + hero.base_attack_max) / 2 + ((hero.base_agi + hero.base_str + hero.base_int) * 6) / 10;
                }
                hero.base_armor = parseFloat((hero.base_armor + hero.base_agi / 6).toFixed(1));
                hero.base_count_asi_gain = parseFloat(hero.str_gain + hero.agi_gain + hero.int_gain).toFixed(1);
                $.each(heroes_cn, function (index, hero_cn) {
                    if (hero_cn.id == parseInt(key)) {
                        hero.localized_name_cn = hero_cn.localized_name;
                        result_heroes.push(hero);
                        return;
                    }
                });
            }
        })
        console.log(result_heroes);

        let tableHero = "";
        let wrapperHero="";
        let $dota2_wrapper=$(".wrapper-images");
        $.each(result_heroes, function (index, hero) {
            // var settings = {
            //     "url": "http://127.0.0.1:8094/v1/chat/completions",
            //     "method": "POST",
            //     "timeout": 0,
            //     "headers": {
            //         "Authorization": "Bearer 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",
            //         "Content-Type": "application/json"
            //     },
            //     "data": JSON.stringify({
            //         "model": "claude-3-sonnet-20240229",
            //         "stream": false,
            //         "messages": [
            //             {
            //                 "role": "system",
            //                 "content": "你是一个审美机器人，每次对话我都给你一个图片链接，内容是一个游戏的英雄，大多不是人类的形象。你尽量告诉我，图片内的英雄的颜值和美感能打多少分，最难看是0，最好看是100.0，分数精确到小数点一位，请以下面json的格式输出'{\"url\":\"${图片链接}\",\"score\":\"${分数}\",\"description\":\"${你对图片的评价}\"}'"
            //             },
            //             {
            //                 "role": "user",
            //                 "content": "https://hoppinzq.com/dota2/gif/"+result_heroes[index].name+".gif"
            //             }
            //         ]
            //     }),
            // };
            // console.log(hero)
            // $.ajax(settings).done(function (response) {
            //     result_heroes_str.push(response);
            //     console.log(response)
            // });
            wrapperHero +=`<div class="line dota2_b_png"
             style="background-image:url(https://hoppinzq.com/dota2/png/${hero.name}.png)">
            <div class="img"
                 style="background-image:url(https://hoppinzq.com/dota2/png/${hero.name}.png)"></div>
        </div>`
            if((index+1)%14==0){
                let $dota2_line=$("<div class='images-line'></div>");
                $dota2_wrapper.append($dota2_line);
                $dota2_line.append(wrapperHero);
                wrapperHero="";
            }
            tableHero += `<tr><td>${hero.id}</td><td><a href="javascript:void(0)">${hero.localized_name_cn}</a></td>
<td>${hero.localized_name}</td><td><span className="badge badge-warning">${hero.primary_attr}_zhangqi</span></td>
<td>${hero.base_str}</td><td>${hero.base_agi}</td><td>${hero.base_int}</td><td>${parseFloat(hero.str_gain + hero.agi_gain + hero.int_gain).toFixed(1)}</td><td>${hero.base_attack}</td><td>
            <a href="javascript:void(0)" className="text-danger" data-toggle="tooltip" data-original-title="Delete"><i
                className="ti-trash" aria-hidden="true"></i></a>
        </td></tr>`
        })
        console.log(result_heroes_str)
        timeout(1).then(function () {
            anime_end();
            return timeout(25000);
        }).then(function () {
            stop_anime();
            $("#background_video").fadeOut(2000);
            $(".dota2_war").fadeOut(2000);
            $("#dota2_end").fadeOut(2000);
            return timeout(time_each_card_delay);
        }).then(function () {
            anime_ps("PS：每点力量提供20点生命和0.09秒生命恢复速度", delay_endTime, ps_main_leaveTime);
            rate("base_str","初始力量最高");
            $(".wrapper-images").fadeIn(2000).delay(5000).fadeOut(3000);
            anime({
                targets: '.dota2_b_png',
                scale: [
                    {value: .1, easing: 'easeOutSine', duration: 500},
                    {value: 1, easing: 'easeInOutQuad', duration: 1200}
                ],
                translateX: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'x'}),
                translateY: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'y'}),
                //rotateZ: anime.stagger([0, 90], {grid: [14, 5], from: 'center', axis: 'x'}),
                delay: anime.stagger(200, {grid: [14, 5], from: 'center'}),
                easing: 'easeInOutQuad'
            });
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            anime_ps("PS：每点敏捷提供1攻击速度和0.16点护甲", delay_endTime, ps_main_leaveTime);
            rate("base_agi","初始敏捷最高");
            return timeout(time_each_card);
        }).then(function () {
            anime_ps("PS：每点智力提供12点魔法和0.05秒魔法恢复速度", delay_endTime, ps_main_leaveTime);
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            rate("base_int","初始智力最高");
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            rate("base_str","初始力量最低",true);
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            rate("base_agi","初始敏捷最低",true)
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            anime_ps("PS：敌法弱不弱智我不知道，但是一手敌法肯定是弱智", delay_gold_endTime, ps_leaveTime);
            rate("base_int","初始智力最低",true);
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            rate("str_gain","力量成长最高")
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            rate("agi_gain","敏捷成长最高");
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            rate("int_gain","智力成长最高");
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            anime_ps("PS：你怎么肥事小老弟", delay_gold_endTime, ps_leaveTime);
            rate("str_gain","力量成长最低",true);
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            rate("agi_gain","敏捷成长最低",true);
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            anime_ps("PS：好像所有游戏里设定的巨魔都是弱智", delay_gold_endTime, ps_leaveTime);
            rate("int_gain","智力成长最低",true);
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            anime_ps("PS：三围：力量，敏捷，智力", delay_endTime, ps_main_leaveTime);
            rate("base_count_asi_gain","三围成长最优秀")
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            rate("base_count_asi_gain","三围成长最差劲",true);
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            anime_ps("森海飞霞：是我！金色传说！", delay_gold_endTime, ps_leaveTime);
            rate("attack_rate","初始攻速最慢");
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            anime_ps("PS：主宰！永远滴神！", delay_gold_endTime, ps_leaveTime);
            rate("attack_rate","初始攻速最快",true);
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            rate("move_speed","初始移速最快");
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            anime_ps("PS：阻止我们发挥的，不是天真，而是无'鞋'啊！", delay_endTime, ps_main_leaveTime);
            rate("move_speed","初始移速最慢",true);
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            anime_ps("PS：每个英雄除了基础攻击力上下限外，其主属性会额外提供1点攻击力，英雄的攻击力取最大加最小的平均数加主属性", delay_endTime, ps_main_leaveTime);
            rate("base_attack","初始攻击力最高");
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            anime_ps("PS：都闪开，我去下路，保敌法！", delay_gold_endTime, ps_leaveTime);
            rate("base_attack","初始攻击力最低",true);
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            anime_ps("PS：护甲再高，也挡不住聪明人来提款", delay_gold_endTime, ps_leaveTime);
            rate("base_armor","初始护甲最高");
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            anime_ps("PS：没错，这货就是负甲", delay_gold_endTime, ps_leaveTime);
            rate("base_armor","初始护甲最低",true);
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            return timeout(time_each_card_delay);
        }).then(function () {
            anime_ps("PS：节肢动物狂喜！等等，怎么有个人？？！！", delay_gold_endTime, ps_leaveTime);
            rate("legs","腿最多（什么鬼？）");
            return timeout(time_each_card);
        }).then(function () {
            stop_anime();
            anime_end();
            //return timeout(time_each_card_delay);
        });
    })

    function stop_anime() {
        anime.remove('.dota2_div');
        anime.remove('.dota2_card');
    }

    /**
     * 属性排序
     * @param attr
     * @param title
     * @param reverse
     */
    function rate(attr,title,reverse=false) {
        let base_delay = 1000;
        let base_delay_endTime = 10000;
        $("#dota2_message").html("");
        $("#dota2_title").html("");
        Function(`$("#dota2_title").html("${title}");
            result_heroes.sort(function (a, b) {
                return b.${attr} - a.${attr};
            });
            if(${!reverse}){
                for (let i = hero_num - 1; i > -1; i--) {
                    $("#dota2_message").append(get_dota2_dom(i, 0, result_heroes[i].${attr}));
                }
            }else{
                let j = 4;
                for (let i = result_heroes.length - 5; i < result_heroes.length; i++) {
                    $("#dota2_message").append(get_dota2_dom(j, i, result_heroes[i].${attr}));
                    j--;
                }
            }
        `)();
        let anime_title = anime({
            targets: '#dota2_title',
            translateX: moveX,
            delay: base_delay,
            endDelay: base_delay_endTime,
            direction: 'alternate',
            loop: true,
            easing: 'linear'
        });
        let anime_hero_5 = anime({
            targets: '#dota2_card5',
            translateX: moveX,
            delay: base_delay += 3000,
            endDelay: base_delay_endTime -= 1500,
            direction: 'alternate',
            loop: true,
            easing: 'linear'
        });
        let anime_hero_4 = anime({
            targets: '#dota2_card4',
            translateX: moveX,
            delay: base_delay += 3000,
            endDelay: base_delay_endTime -= 1500,
            direction: 'alternate',
            loop: true,
            easing: 'linear'
        });
        let anime_hero_3 = anime({
            targets: '#dota2_card3',
            translateX: moveX,
            delay: base_delay += 3000,
            endDelay: base_delay_endTime -= 1500,
            direction: 'alternate',
            loop: true,
            easing: 'linear'
        });
        let anime_hero_2 = anime({
            targets: '#dota2_card2',
            translateX: moveX,
            delay: base_delay += 3000,
            endDelay: base_delay_endTime -= 1500,
            direction: 'alternate',
            loop: true,
            easing: 'linear'
        });
        let anime_hero_1 = anime({
            targets: '#dota2_card1',
            translateX: moveX,
            delay: base_delay += 3000,
            endDelay: base_delay_endTime -= 1500,
            direction: 'alternate',
            loop: true,
            easing: 'linear'
        });
        animation.push(anime_title)
        animation.push(anime_hero_1)
        animation.push(anime_hero_2)
        animation.push(anime_hero_3)
        animation.push(anime_hero_4)
        animation.push(anime_hero_5)
    }

    function anime_ps(msg, delay_time, delay_endTime) {
        $("#dota2_ps").show();
        $("#dota2_ps").html("");
        let anime_ps = anime({
            targets: '#dota2_ps',
            translateX: 2100,
            delay: delay_time,
            endDelay: delay_endTime,
            direction: 'alternate'
        });
        animation.push(anime_ps)
        setTimeout(function () {
            text({
                str: msg,
                effect: "left",
                speed: 60,
                dom: "#dota2_ps"
            });
        }, delay_time)
    }

    function anime_end() {
        $("#dota2_message").html("");
        $("#dota2_title").html("");
        $("#dota2_end").show();
        anime({
            targets: '#dota2_end',
            translateX: moveX
        });
        dota2_bg();
        dota2_war();
        //$(".wrapper-images").fadeIn(2000);
        text({
            str: "力量，敏捷，智力，速度，护甲，都不过是史诗的要素；围绕着遗迹展开的故事才是史诗本身。",
            effect: "left",
            speed: 200,
            dom: "#dota2_end"
        });
    }

    function dota2_bg() {
        $("#background_video").fadeIn(1000);
        $("#video_cover").fadeIn(1000);
        background_video.init({
            videoEl: document.querySelector('#background_video'),
            container: document.querySelector('body'),
            resize: true,
            isMobile: window.matchMedia('(max-width: 768px)').matches,
            playButton: document.querySelector('#play'),
            pauseButton: document.querySelector('#pause'),
            src: [
                {
                    src: 'https://hoppinzq.com/dota2/video/map_update_2023_embiggening.webm',
                    type: 'video/webm;codecs="vp8, vorbis"'
                }
            ],
            onLoad: function () {
                document.querySelector('#video_cover').style.display = 'none';
                let video = document.getElementById("background_video");
                video.playbackRate = 0.75;
                video.autoplay = true;
                video.play();
            }
        });
    }

    function dota2_war() {
        $(".dota2_war").fadeIn(1000);
        let top=-0;
        let left=-0;
        let duration=2000;
        anime({
            targets: '#hero_tt_1',
            translateY: -290+left,
            duration: 3300+duration,
            easing: 'easeOutExpo',
            delay: 2000
        });
        anime({
            targets: '#hero_tt_2',
            translateX: function(el) {
                return -60+top;
            },
            translateY: function(el, i) {
                return -230+left;
            },
            duration: 3800+duration,
            delay: 2100,
            easing: 'easeOutExpo',
            direction: 'alternate',
            loop: false
        });
        anime({
            targets: '#hero_yy_1',
            translateY: 60+left,
            translateX: -480+top,
            easing: 'easeOutExpo',
            duration: 3000+duration,
            delay: 2000
        });
        anime({
            targets: '#hero_yy_2',
            translateY: 0+left,
            translateX: -420+top,
            easing: 'easeOutExpo',
            duration: 3200+duration,
            delay: 2100
        });
        anime({
            targets: '#hero_tt_3',
            translateX: function(el) {
                return 160+top;
            },
            translateY: function(el, i) {
                return -160+left;
            },
            duration: 3500+duration,
            delay: 2000,
            easing: 'easeOutExpo',
            loop: false
        });
        anime({
            targets: '#hero_yy_3',
            translateX: function(el) {
                return -200+top;
            },
            translateY: function(el, i) {
                return 140+left;
            },
            duration: 3500+duration,
            delay: 2000,
            easing: 'easeOutExpo',
            loop: false
        });
        anime({
            targets: '#hero_tt_4',
            translateX: 440+top,
            translateY: 0+left,
            duration: 3200+duration,
            easing: 'easeOutExpo',
            delay: 2100
        });
        anime({
            targets: '#hero_tt_5',
            translateX: 440+top,
            duration: 3000+duration,
            easing: 'easeOutExpo',
            delay: 2000
        });
        anime({
            targets: '#hero_yy_4',
            translateY: 320+left,
            duration: 3200+duration,
            easing: 'easeOutExpo',
            delay: 2000
        });
        anime({
            targets: '#hero_yy_5',
            translateX: function(el) {
                return 0+top;
            },
            translateY: function(el, i) {
                return 320+left;
            },
            duration: 3500+duration,
            easing: 'easeOutExpo',
            delay: 2000,
            direction: 'alternate',
            loop: false
        });
    }

    function get_dota2_dom(i, index, base) {
        let text;
        if (index === 0) {
            text = `<div id='dota2_card${i + 1}' class='dota2_card dota2_rate${i + 1}'>
                    <img style="background:url('https://hoppinzq.com/dota2/gif/${result_heroes[i].name}.gif') center;background-size:140px 140px;background-repeat:no-repeat;" />
                    <dd>${result_heroes[i].localized_name_cn}</dd>
                    <p class='hero_rate'>${base}</p>
                    <a href='#' onclick='open_hero_message(${i})'></a>
                </div>`;
        } else {
            text = `<div id='dota2_card${i + 1}' class='dota2_card dota2_rate${i + 1}'>
                    <img style="background:url('https://hoppinzq.com/dota2/gif/${result_heroes[index].name}.gif') center;background-size:140px 140px;background-repeat:no-repeat;" />
                    <dd>${result_heroes[index].localized_name_cn}</dd>
                    <p class='hero_rate'>${base}</p>
                    <a href='#' onclick='open_hero_message(${index})'></a>
                </div>`;
        }
        return text;
    }

    function open_hero_message(index) {
        myAlert(JSON.stringify(result_heroes[index]))
    }

    function myAlert(e) {
        $("body").append(`<div id='alert_msg'><span>${e}</span></div>`);
        clearMsg();
    }

    function clearMsg() {
        let t = setTimeout(function () {
            $("#alert_msg").remove();
        }, 2000)
    };

    function text(parameter) {
        let typewriter = {
            str: parameter.str || "dota2",
            effect: parameter.effect || "upBig",
            speed: parameter.speed || 200,
            dom: parameter.dom || "body",
        }
        arr = [];
        for (let i = 0; i < typewriter.str.length; i++) {
            arr[i] = typewriter.str[i];
        }
        let num = 0;
        obj = setInterval(function () {
            let dom = typewriter.dom;
            let $dom = $(dom);
            if (typewriter.effect === "normal") {
                $dom.append('<span style="display: inline-block;" class="tip">' + arr[num] + '</span>');
            } else if (typewriter.effect === "rightBig") {
                $dom.append('<span style="display: inline-block;" class="tip animated fadeInRightBig">' + arr[num] + '</span>');
            } else if (typewriter.effect === "right") {
                $dom.append('<span style="display: inline-block;" class="tip animated fadeInRight">' + arr[num] + '</span>');
            } else if (typewriter.effect === "leftBig") {
                $dom.append('<span style="display: inline-block;" class="tip animated fadeInLeftBig">' + arr[num] + '</span>');
            } else if (typewriter.effect === "left") {
                $dom.append('<span style="display: inline-block;" class="tip animated fadeInLeft">' + arr[num] + '</span>');
            } else if (typewriter.effect === "downBig") {
                $dom.append('<span style="display: inline-block;" class="tip animated fadeInDownBig">' + arr[num] + '</span>');
            } else if (typewriter.effect === "down") {
                $dom.append('<span style="display: inline-block;" class="tip animated fadeInDown">' + arr[num] + '</span>');
            } else if (typewriter.effect === "upBig") {
                $dom.append('<span style="display: inline-block;" class="tip animated fadeInUpBig">' + arr[num] + '</span>');
            } else if (typewriter.effect === "up") {
                $dom.append('<span style="display: inline-block;" class="tip animated fadeInUp">' + arr[num] + '</span>');
            }
            num++
            if (num === arr.length) {
                clearInterval(obj);
            }
        }, typewriter.speed);

    }
</script>
</html>
